<!--
 * @Author: your name
 * @Date: 2021-08-24 10:19:29
 * @LastEditTime: 2021-11-20 20:10:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%- title %>
  </title>
</head>

<body>
  <%- lessLink%>
    <div id="app">
      <script>
        window.less = {
          async: true,
          env: 'production'
        };
      </script>
      <style>
          .loading{
                height: 100vh;
                width: 100wh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                

          }
          .loading_logo img{
               width: 120px;
               
          }
          .loading_title{
               font-weight: bold;
               font-size: 1.6rem;
               margin-bottom: 6rem;
          }
          .loader{
            position: absolute;
            top:60%;
            left: 40%;
            margin-left: 10%;
            transform :translate3d(-50%,-50%,0);
          }
          
          .dot{
            width :20px;
            height :20px;
            border-radius :100%;
            display :inline-block;
            animation: slide 1s infinite;
            margin: 0 5px;
          }
          .dot:nth-child(1){
            animation-delay:.1s;
            background: #008c8cbb;
          }
          .dot:nth-child(2){
            animation-delay:.2s;
            background: #026eacd0;
          }
          .dot:nth-child(3){
            animation-delay:.3s;
            background: #00a7168c;
          }
          .dot:nth-child(4){
            animation-delay:.4s;
            background: #c2012b85;
          }
          .dot:nth-child(5){
            animation-delay:.5s;
            background: rgba(0, 192, 192, 0.747);
          }
          @keyframes slide{
            0%{
              transform:scale(1);
            }
              
            50%{
              
              opacity:.3;
              transform:scale(1.5);
            }
            100%{
              transform:scale(1);
            }
          }
  
      </style>
      <div class="loading">
           <div class="loading_logo">
                <img src="/logologin.svg" alt="logo">
           </div>
           <div class="loading_title">
            <%= title %>
           </div>
           <div class="loading_bars">
                 <div class="loader">
                      <div class="dot"></div>
                      <div class="dot"></div>
                      <div class="dot"></div>
                      <div class="dot"></div>
                      <div class="dot"></div>
                 </div>
           </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <link rel="stylesheet" id="dataTheme" href="#">
    <%- lessScript%>
</body>

</html>